<template>
  <el-drawer
    :size="size"
    title="知识库预览"
    :visible="show"
    @close="handleClose"
  >
    <div style="margin: 40px; border: 1px solid #eeeeee">
      <!-- 知识首页 -->
      <div class="index_container" v-if="step == 1">
        <!-- 顶部搜索栏 -->
        <div class="flex searchbox">
          <div class="lable">常见问题</div>
          <div class="search">
            <el-input
              size="mini"
              prefix-icon="el-icon-search"
              v-model="pageModel.title"
              placeholder="请输入搜索关键词"
              @keyup.enter.native="getKnowledgelist('refresh')"
            ></el-input>
          </div>
        </div>
        <!-- 搜索内容 -->
        <div class="flex searchResult">
          <!-- 左边侧边导航 -->
          <div v-if="navList.length > 0" class="nav">
            <div
              :class="[
                'nav_item',
                'rela',
                pageModel.categoryId + '' == item.categoryId + ''
                  ? 'nav_item_active'
                  : '',
              ]"
              v-for="(item, index) in navList"
              :key="index"
              @click="navClick(item, index)"
            >
              <div class="nav_item_lable overtxt">{{ item.categoryName }}</div>
              <div
                class="nav_item_icon abso"
                v-if="pageModel.categoryId + '' == item.categoryId + ''"
              ></div>
            </div>
          </div>
          <!-- 右边内容列表 -->
          <div
            class="navContain"
            :style="{ width: (navList.length > 0 ? 257 : 375) + 'px' }"
          >
            <!-- 列表 -->
            <div class="list">
              <div
                class="list_item flex"
                @click="toKnowledgeDetail(item)"
                v-if="list.length > 0"
                v-for="(item, index) in list"
                :key="index"
              >
                <img
                  class="list_item_cover"
                  :src="
                    item.knowledgePic
                      ? item.knowledgePic
                      : 'https://oss.metaxun.com/wx/zy/nocourse.png'
                  "
                />
                <div class="list_item_t overtxt">{{ item.title }}</div>
              </div>

              <!-- 暂无数据 -->
              <el-empty
                v-if="list.length == 0"
                description="暂无知识"
              ></el-empty>
            </div>

            <!-- 按钮组 -->
            <div class="btns flexcen" v-if="navList.length > 0">
              <div class="btn">
                <img
                  src="@/assets/images/mini/knowledge/add.png"
                  class="btn_icon"
                />
                <div class="btn_lable">新增</div>
              </div>
              <div class="btn">
                <img
                  src="@/assets/images/mini/knowledge/record.png"
                  class="btn_icon"
                />
                <div class="btn_lable">记录</div>
              </div>
              <div class="btn">
                <img
                  src="@/assets/images/mini/knowledge/code.png"
                  class="btn_icon"
                />
                <div class="btn_lable">二维码</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 知识页详情 -->
      <div
        v-if="step == 2"
        class="rela flexcen"
        style="text-align: center; height: 40px; line-height: 40px"
      >
        <img
          @click="back"
          class="shou abso"
          style="width: 20px; height: 20px; top: 10px; left: 5px"
          src="@/assets/images/back.png"
          alt=""
        />
        <div style="max-width: 180px" class="overtxt">
          {{ knowledge.title }}
        </div>
      </div>
      <div class="detail_container" v-if="step == 2">
        <div class="flex item">
          <div class="lable"><span style="color: #ff4d03">*</span>知识类目</div>

          <div class="value">{{ knowledge.categoryName }}</div>
        </div>
        <div class="flex item">
          <div class="lable"><span style="color: #ff4d03">*</span>知识标题</div>
          <div class="value">
            <div>{{ knowledge.title }}</div>
          </div>
        </div>
        <div class="item">
          <div class="lable"><span style="color: #ff4d03">*</span>知识封面</div>

          <img
            style="width: 190px; height: 120px"
            :src="
              knowledge.knowledgePic
                ? knowledge.knowledgePic
                : 'https://oss.metaxun.com/wx/zy/nocourse.png'
            "
          />
        </div>
        
        <div class="item">
          <div class="lable">
            <span style="color: #ff4d03">*</span>
            知识内容
          </div>
          <div class="mpvalue">
            <div v-html="knowledge.content"></div>
          </div>
        </div>
        <div class="flex item" v-if="knowledge.knowledgeFile.length > 0">
          <div class="lable">知识附件</div>
          <div class="courseware_list">
            <div
              class="courseware_list_item"
              @click="openFile(item2.url)"
              v-for="(item2, index2) in knowledge.knowledgeFile"
              :key="index2"
            >
              <img class="pdf_img" :src="returnIcon(item2.url, 1)" alt="" />
              <div class="pdf_name overtxt">{{ item2.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { returnIcon } from "@/utils/util.js";
import {
  categorylist,
  knowledgelist,
  getknowledge,
  getknowledgetemporary,
} from "@/api/knowledge_mini";
export default {
  name: "app",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    prop_id: [String, Number],
    prop_step: [String, Number],
  },
  data() {
    return {
      returnIcon: function (url, type) {
        return returnIcon(url, type);
      },
      knowledgeTemporaryId: null,
      knowledgeId: 89,
      knowledge: {},
      step: 2,
      fullShow: false,
      size: "450px",
      navIndex: 0,
      navList: [],
      list: [],
      pageModel: {
        title: "",
        pageNum: 1,
        pageSize: 10,
        categoryId: "",
        status: 0,
      },
      tabId: "",
    };
  },
  watch: {
    async show(e) {
      if (e) {
        this.step = this.prop_step ? this.prop_step : 1;
        if (this.step == 1) {
          await this.getCategoryList();
          if (this.navList.length > 0) {
            this.pageModel.categoryId = this.navList[0].categoryId;
            this.getKnowledgelist("refresh");
          }
        }
        this.knowledgeTemporaryId = this.prop_id ? this.prop_id : null;
        if (this.prop_id) {
          this.getInfo();
        }
        this.knowledgeId = null;
      }
    },
  },
  async mounted() {},
  methods: {
    openFile(url) {
      window.open(url, "_blank");
    },
    /* 获取知识详细 */
    async getInfo() {
      try {
        let res;
        if (this.knowledgeTemporaryId) {
          res = await getknowledgetemporary(this.knowledgeTemporaryId);
        } else {
          res = await getknowledge(this.knowledgeId);
        }
        res.data.knowledgeFile = res.data.knowledgeFile
          ? JSON.parse(res.data.knowledgeFile)
          : [];
        this.knowledge = res.data;
      } finally {
      }
    },
    /* 查看知识详情 */
    toKnowledgeDetail(item) {
      this.knowledgeId = item.knowledgeId;
      this.step = 2;
      this.getInfo();
    },
    back() {
      this.step = 1;
    },
    /* 导航栏点击 */
    navClick(e, index) {
      this.pageModel.categoryId = this.navList[index].categoryId;
      this.getKnowledgelist("refresh");
    },
    /* 获取分类列表 */
    async getCategoryList() {
      try {
        let res = await categorylist();
        if (res.code == 200) {
          console.log("加载中", res.rows);
          this.navList = res.rows;
        }
      } catch (error) {}
    },
    /* 获取知识点列表 */
    async getKnowledgelist(type) {
      try {
        if (type == "refresh") {
        }
        this.pageModel.pageNum =
          type == "refresh" ? 1 : this.pageModel.pageNum + 1;
        let res = await knowledgelist(this.pageModel);
        if (res.code == 200) {
          this.list =
            type == "refresh" ? res.rows : [...this.list, ...res.rows];
        }
      } catch (error) {}
    },
    switchFullShow() {
      this.fullShow = !this.fullShow;
      if (this.fullShow) {
        this.size = "100%";
      } else {
        this.size = "450px";
      }
    },
    handleClose() {
      this.$emit("update:show", false);
    },
  },
};
</script>
    
<style scoped lang='scss'>
.courseware_list {
  padding-top: 10px;
  width: 100%;
}
.courseware_list_item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.pdf_img {
  width: 32px;
  height: 32px;
}
.pdf_name {
  width: 300px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 32px;
}
.detail_container {
  overflow-y: scroll;
  padding: 16px;
  box-sizing: border-box;
  background: #fafafa;
  height: 650px;
  item:nth-of-type(1) {
    margin-top: 0;
  }
  .item {
    margin-top: 20px;
    .tip {
      span {
        color: #e95756;
      }

      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .lable {
      font-size: 14x;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }
    .value {
      margin-left: 12px;
      width: 275px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      ::v-deep .van-cell {
        width: 100%;
        padding: 0 !important;
      }
    }
    .uploader {
      margin-top: 8px;
      padding: 14px 14px 5px 14px;
      background: white;
    }
    .mpvalue {
      margin-top: 8px;
      width: 343px;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
}
@mixin btn_plain($bg_color, $color) {
  background: $bg_color;
  color: $color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-size: 28px;
  &:active {
    background: darken($bg_color, 10%);
    color: darken($color, 18%);
  }
  &:disabled {
    background: lighten($bg_color, 10%);
    color: lighten($color, 40%);
  }
  @content;
}
.index_container {
  overflow: hidden;
  width: 375px;
  height: 650px;
  background: #fafafa;
}
.searchbox {
  width: 375px;
  height: 44px;
  background: #ffffff;
  .lable {
    padding: 0 16px 0 30px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44px;
  }
  //   搜索框！！！
  .search {
    width: 253px;
    padding-top: 8px;
    ::v-deep .el-input__inner {
      border-radius: 14px !important;
    }
  }
}
.searchResult {
  margin-top: 10px;
  height: calc(650px - 44px - 10px);
  .nav {
    width: 116px;
    background: #fafafa;
    height: 100%;
    overflow-y: scroll;
    .nav_item {
      @include btn_plain(#ffffff, #999999) {
        padding-left: 4px;
        box-sizing: border-box;
        width: 116px;
        height: 56px;
        background: #fafafa;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 56px;
        text-align: center;
      }
    }
    .nav_item_active {
      padding-left: 4px;
      box-sizing: border-box;
      background: #ffffff;
      color: #f85415;
      font-weight: 600;
      .nav_item_icon {
        left: 0;
        top: 8px;
        width: 4px;
        height: 40px;
        background: linear-gradient(180deg, #ff4d03 0%, #ff9a00 100%);
        border-radius: 2px;
      }
    }
  }
  .navContain {
    background: #ffffff;
    height: 100%;
    .list {
      box-sizing: border-box;
      height: calc(650px - 44px - 10px - 65px - 64px);
      overflow-y: scroll;
      .list_item {
        padding: 7px 0;
      }
      .list_item_cover {
        width: 80px;
        height: 45px;
      }
      .list_item_t {
        width: 165px;
        padding: 2px 5px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
    .btns {
      padding: 10px 0 0px 0;

      .btn:nth-of-type(1) {
        margin-left: 0 !important;
      }
      .btn {
        margin-left: 43px;
        width: 42px;
        .btn_icon {
          width: 42px;
          height: 42px;
        }
        .btn_lable {
          margin-top: 14px;
          text-align: center;
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
    